<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!-- 20120903 수정 : 메인 레이아웃 변경 -->
<!-- Contents -->
<div id="content">
	<div class="mLeft">
		<div class="main_img">
			<!--  <div>
        	        <img src="../images/recruit/20141118_main.jpg" alt="" border="0" usemap="#main20140616" />
        	    </div> -->
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <!-- use jssor.slider.mini.js (40KB) instead for release -->
    <!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) -->
    <script type="text/javascript" src="js/jssor.js"></script>
    <script type="text/javascript" src="js/jssor.slider.js"></script>
    <script>

        jQuery(document).ready(function ($) {
            //Reference http://www.jssor.com/development/slider-with-caption-jquery.html
            //Reference http://www.jssor.com/development/reference-ui-definition.html#captiondefinition
            //Reference http://www.jssor.com/development/tool-caption-transition-viewer.html

            var _CaptionTransitions = [
            //CLIP|LR
            {$Duration: 900, $Clip: 3, $Easing: $JssorEasing$.$EaseInOutCubic },
            //CLIP|TB
            {$Duration: 900, $Clip: 12, $Easing: $JssorEasing$.$EaseInOutCubic },

            //ZMF|10
            {$Duration: 600, $Zoom: 11, $Easing: { $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 },

            //ZML|R
            {$Duration: 600, x: -0.6, $Zoom: 11, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic }, $Opacity: 2 },
            //ZML|B
            {$Duration: 600, y: -0.6, $Zoom: 11, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic }, $Opacity: 2 },

            //ZMS|B
            {$Duration: 700, y: -0.6, $Zoom: 1, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic }, $Opacity: 2 },

            //RTT|10
            {$Duration: 700, $Zoom: 11, $Rotate: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} },

            //RTTL|R
            {$Duration: 700, x: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} },
            //RTTL|B
            {$Duration: 700, y: -0.6, $Zoom: 11, $Rotate: 1, $Easing: { $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} },

            //RTTS|R
            {$Duration: 700, x: -0.6, $Zoom: 1, $Rotate: 1, $Easing: { $Left: $JssorEasing$.$EaseInQuad, $Zoom: $JssorEasing$.$EaseInQuad, $Rotate: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseOutQuad }, $Opacity: 2, $Round: { $Rotate: 1.2} },
            //RTTS|B
            {$Duration: 700, y: -0.6, $Zoom: 1, $Rotate: 1, $Easing: { $Top: $JssorEasing$.$EaseInQuad, $Zoom: $JssorEasing$.$EaseInQuad, $Rotate: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseOutQuad }, $Opacity: 2, $Round: { $Rotate: 1.2} },

            //R|IB
            {$Duration: 900, x: -0.6, $Easing: { $Left: $JssorEasing$.$EaseInOutBack }, $Opacity: 2 },
            //B|IB
            {$Duration: 900, y: -0.6, $Easing: { $Top: $JssorEasing$.$EaseInOutBack }, $Opacity: 2 },

            ];

            var options = {
                $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $AutoPlaySteps: 1,                                  //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
                $AutoPlayInterval: 3000,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
                $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

                $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
                $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
                $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
                $SlideWidth: 667,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
                $SlideHeight: 354,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
                $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0
                $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
                $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
                $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
                $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
                $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

                $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                    $Class: $JssorCaptionSlider$,                   //[Required] Class to create instance to animate caption
                    $CaptionTransitions: _CaptionTransitions,       //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
                    $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                    $PlayOutMode: 3                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
                },

                $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                    $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 0,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                    $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                    $SpacingX: 10,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                    $SpacingY: 10,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                    $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                },

                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                    $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                    $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                    $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
                }
            };
            var jssor_slider1 = new $JssorSlider$("slider1_container", options);
            //responsive code begin
            //you can remove responsive code if you don't want the slider scales while window resizes
            function ScaleSlider() {
                var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
                if (parentWidth)
                    jssor_slider1.$ScaleWidth(Math.min(parentWidth, 600));
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            //responsive code end
        });
    </script>


			<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 667px; height: 354px; overflow: hidden; ">

        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(images/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 667px; height: 354px; overflow: hidden;">
            <div>
            	<img u="image" src="images/main_middle.gif" />
            </div>
            <div>
                <a href="app_pass_form.do"><img u="image" src="images/20141118_main.jpg" /></a>
            </div>
            <div>
                <a href="DesignerInfo.do"><img u="image" src="images/20141104_main.jpg" /></a>
            </div>
        </div>
        
        <!-- Bullet Navigator Skin Begin -->
        <!-- jssor slider bullet navigator skin 01 -->
        <style>
            /*
            .jssorb01 div           (normal)
            .jssorb01 div:hover     (normal mouseover)
            .jssorb01 .av           (active)
            .jssorb01 .av:hover     (active mouseover)
            .jssorb01 .dn           (mousedown)
            */
            .jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
                filter: alpha(opacity=70);
                opacity: .7;
                overflow: hidden;
                cursor: pointer;
                border: #000 1px solid;
            }

            .jssorb01 div {
                background-color: gray;
            }

                .jssorb01 div:hover, .jssorb01 .av:hover {
                    background-color: #d3d3d3;
                }

            .jssorb01 .av {
                background-color: #fff;
            }

            .jssorb01 .dn, .jssorb01 .dn:hover {
                background-color: #555555;
            }
        </style>
        <!-- bullet navigator container -->
        <div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;">
            <!-- bullet navigator item prototype -->
            <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
        </div>
        <!-- Bullet Navigator Skin End -->
        
        <!-- Arrow Navigator Skin Begin -->
        <style>
            /* jssor slider arrow navigator skin 02 css */
            /*
            .jssora02l              (normal)
            .jssora02r              (normal)
            .jssora02l:hover        (normal mouseover)
            .jssora02r:hover        (normal mouseover)
            .jssora02ldn            (mousedown)
            .jssora02rdn            (mousedown)
            */
            .jssora02l, .jssora02r, .jssora02ldn, .jssora02rdn
            {
            	position: absolute;
            	cursor: pointer;
            	display: block;
                background: url(images/a02.png) no-repeat;
                overflow:hidden;
            }
            .jssora02l { background-position: -3px -33px; }
            .jssora02r { background-position: -63px -33px; }
            .jssora02l:hover { background-position: -123px -33px; }
            .jssora02r:hover { background-position: -183px -33px; }
            .jssora02ldn { background-position: -243px -33px; }
            .jssora02rdn { background-position: -303px -33px; }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora02l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora02r" style="width: 55px; height: 55px; top: 123px; right: 8px">
        </span>
        <!-- Arrow Navigator Skin End -->
        <a style="display: none" href="http://www.jssor.com">bootstrap carousel</a>
    </div>

			<!--<area shape="rect" coords="24,290,222,341" href="http://www.facebook.com/ElandRecruit/" target="_blank" />-->
		</div>
		<!--// Main Top Image -->

		<div class="main_news">
			<div class="mNotice">
				<p>
					<img src="images/main_v4_notice_t.gif" width="319" alt="공지사항">
				</p>
				<!-- li 8개가 max -->
				<ul>
					<c:forEach var="notice" items="${notice }" end="7">
						<c:choose>
							<c:when test="${fn:length(notice.notice_nm) > 28}">
							<li><a href="notice_detail.do?notice_num=${notice.notice_num }"><c:out value="${fn:substring(notice.notice_nm,0,27)}" />...</a></li>
          					</c:when>
						<c:otherwise>
							<li><a href="notice_detail.do?notice_num=${notice.notice_num }"><c:out value="${notice.notice_nm}" /></a></li>
						</c:otherwise>
						</c:choose>
				</c:forEach>

				</ul>
			</div>
			<!--// 공지사항 리스트 -->

			<div class="mInterview" style="height: 280px;">
				<p>
					<img src="images/main_v5_interview_t.gif" width="319" alt="4대이념">
				</p>
				<img src="images/m_v5_interview_img.jpg" usemap="#Map" alt="">
				<map name="Map">
					<area shape="rect" coords="13,3,146,94"
						href="http://www.youtube.com/watch?v=7kdqRPwC2lU" target="_blank">
					<area shape="rect" coords="167,3,307,95"
						href="http://www.youtube.com/watch?v=JWZmdWP67DA" target="_blank">
					<area shape="rect" coords="12,117,146,212"
						href="http://www.youtube.com/watch?v=YM42yBMrCsM" target="_blank">
					<area shape="rect" coords="168,116,306,210"
						href="http://www.youtube.com/watch?v=T5vkaycer8U" target="_blank">
				</map>
			</div>


			<!--// 공지사항 리스트 -->
		</div>
		<!--// Main News -->

		<div class="banner">
			<p class="banner01">
				<img src="images/banner_20140617.jpg" width="669" height="119"
					border="0" usemap="#banner_map">
				<map name="banner_map" id="banner_map">
					<area shape="rect" coords="3,1,217,119" href="DesignerInfo.do"
						target="_blank" alt="개발인턴쉽">
					<area shape="rect" coords="227,1,445,118"
						href="recruitment.do" alt="g.i.joe">
					<area shape="rect" coords="451,3,669,117"
						href="http://itjobfair.incruit.com/" alt="IT박람회">
				</map>
			</p>
		</div>
		<!--// Main Banner -->
	</div>
	<!--// Main Left -->

	<div class="mRight">
		<div class="mRecruit">
			<p style="height: 39px">
				<img src="images/main_v4_recuruit_t.gif" width="301" alt="채용공고">
			</p>
			<!-- 여기는 li가 max 7개 -->
			<ul> 
				<c:forEach var="recruit" items="${recruit }" end="7">
						<c:choose>
							<c:when test="${fn:length(recruit.recruit_nm) > 22}">
							<li><a href="recruitment_detail.do?rcrt_num=${recruit.rcrt_num }"><c:out value="${fn:substring(recruit.recruit_nm,0,21)}" />...</a></li>
          					</c:when>
						<c:otherwise>
							<li><a href="recruitment_detail.do?rcrt_num=${recruit.rcrt_num }"><c:out value="${recruit.recruit_nm}" /></a></li>
						</c:otherwise>
						</c:choose>
				</c:forEach>
			</ul>
			<p>
				<img src="images/main_v4_recuruit_b.gif" alt="" width="301"
					height="152" border="0" usemap="#mRecruit">
			</p>
			<map name="mRecruit" id="mRecruit">
				<area shape="rect" coords="74,9,227,47" href="app_receipt_insert.do"
					title="지원서 작성하기">
			</map>
		</div>
		<!--// Recruit -->

		<div class="mFacebook">

			<div class="fb-like-box fb_iframe_widget"
				data-href="http://www.facebook.com/ElandScout#!/ElandRecruit"
				data-width="296" data-height="355" data-show-faces="true"
				data-stream="true" data-header="true" fb-xfbml-state="rendered"
				fb-iframe-plugin-query="app_id=&amp;header=true&amp;height=355&amp;href=http%3A%2F%2Fwww.facebook.com%2FElandScout%23!%2FElandRecruit&amp;locale=ko_KR&amp;sdk=joey&amp;show_faces=true&amp;stream=true&amp;width=296">
				<span style="vertical-align: bottom; width: 296px; height: 355px;"><iframe
						src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fgijoe&amp;width=296&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=true&amp;show_border=true&amp;appId=744992112261159"
						scrolling="no" frameborder="0"
						style="border: none; overflow: hidden; width: 296px; height: 590px;"
						allowTransparency="true"></iframe></span>
			</div>
		</div>
		<!--// Facebook -->
	</div>
	<!--// Main Right -->
</div>
<!--// Contents -->

<!--// Main Quick -->
<!--// 20120903 수정 : 메인 레이아웃 변경 -->



<!-- bottom menu -->

<script language="JavaScript" type="text/JavaScript">
<!--
	function MM_preloadImages() { //v3.0
		var d = document;
		if (d.images) {
			if (!d.MM_p)
				d.MM_p = new Array();
			var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
			for (i = 0; i < a.length; i++)
				if (a[i].indexOf("#") != 0) {
					d.MM_p[j] = new Image;
					d.MM_p[j++].src = a[i];
				}
		}
	}

	function popPrivacy() {
		var strParamURL = "/popup/pop_privacy.html";
		window.open(strParamURL, "newsPrintWin",
				"width=720, height=700, scrollbars=yes, menubar=no, status=no");
	}

	function popDisclaimer() {
		var strParamURL = "/popup/pop_disclaimer.html";
		window.open(strParamURL, "newsPrintWin",
				"width=700, height=590, scrollbars=no, menubar=no, status=no");
	}

	function popRequest() {
		var strParamURL = "/popup/pop_request.html";
		window.open(strParamURL, "newsPrintWin",
				"width=350, height=200, scrollbars=no, menubar=no, status=no");
	}
//-->
</script>
<script type="text/javascript">
	  var _gaq = _gaq || [];
	_gaq.push([ '_setAccount', 'UA-21233845-53' ]);
	_gaq.push([ '_trackPageview' ]);
	(function() {
		var ga = document.createElement('script');
		ga.type = 'text/javascript';
		ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl'
				: 'http://www')
				+ '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(ga, s);
	})();
</script>